<template>
  <div class="login-container">
    <div class="login-form-wrap">
      <div class="login-head">
        <div class="logo"></div>
      </div>
      <el-form class="login-form" ref="form" :model="user" :rules="rules" size="medium">
        <!-- el-form：表单组件，每个表单项必须使用 el-form-item 组件包裹-->
        <el-form-item prop="mobile">
          <el-input v-model="user.mobile" placeholder="请输入手机号" autofocus=true></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="doLogin('form')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/login'

export default {
  name: 'Login',
  components: {},
  props: {},
  data () {
    return {
      user: {
        mobile: '', // 手机号
        code: '' // 验证码
      },
      // 校验规则
      rules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
          // ,{ len: 11, message: '号码长度必须为11', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'change' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    doLogin (formName) {
      // 获取表单数据（根据接口要求绑定数据）
      const user = this.user
      // 表单验证
      this.formVerify(formName)
      // 验证通过，展示 loading
      const loading = this.doLoading()
      // 提交登录
      login(user).then(res => {
        // 跳转到首页
        // this.$router.push('/index')
        this.$router.push(({
          name: 'index'
        }))
        // 提示登录成功
        this.$message({
          message: '登录成功',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)
        // this.$message.error('登录失败')
      })
      // TODO 登录接口未实现，这里无论验证是否通过，登录是否成功都跳转到首页
      this.$router.push('/index')
      // 关闭 loading
      loading.close()
    },
    // loading 提示
    doLoading () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return loading
    },
    // 表单验证
    formVerify (formName) {
      this.$refs[formName].validate()
      // return this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     console.log('验证通过')
      //   } else {
      //     console.log('验证失败')
      //     return false
      //   }
      // })
    }
  }
}
</script>

<style scoped lang="less">
  .login-container {
    /*固定定位*/
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    // 水平居中
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    // background: url('./最.png') no-repeat;
    /*background-color: #9B59B6;*/
    /*background-size: cover;*/
    /*登录表单 CSS 设置*/
    .login-form-wrap {
      background-color: #9B59B6;
      min-width: 300px;
      padding: 10px 50px 15px;
      .login-head {
        height: 30px;
        display: flex;
        justify-content: center;
        .logo {
          width: 30px;
          height: 30px;
          /*background: url('./最.png') no-repeat;*/
          background-size: contain;
        }
      }
      .login-form {
        .login-btn {
          width: 100%;
        }
      }
    }
  }
</style>
